<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>评论摘要</title>
<meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no'/>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<body>
    <div class="container" id="app">
        <h2>评论摘要</h2>
        <div>
            <button v-on:click="first_pages()" type="button" class="btn btn-primary">首页</button>
            <button v-on:click="last_pages()" type="button" class="btn btn-primary">上一页</button>
            <button v-on:click="next_pages()" type="button" class="btn btn-primary">下一页</button>
        </div>
        <br />
        <div>
            <input type='text' v-model='search_game' placeholder='请输入'/>
            <button v-on:click="search()" type="button" class="btn btn-primary">搜索</button>
        </div>
        <br />
        <table class="table table-striped table-bordered">
            <!-- <caption>评论摘要</caption> -->
            <thead>
                <tr>
                    <th>game_id</th>
                    <th>game_name</th>
                    <th>summaries</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in msgs">
                    <td>{{item.game_id}}</td>
                    <td>{{item.game_name}}</td>
                    <td> 
                        <ul v-for="summary in item.summaries">
                            <li>{{summary}}</li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
        <button v-on:click="first_pages()" type="button" class="btn btn-primary">首页</button>
        <button v-on:click="last_pages()" type="button" class="btn btn-primary">上一页</button>
        <button v-on:click="next_pages()" type="button" class="btn btn-primary">下一页</button>
        <br />
        <br />
    </div>

    
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <script>
        var gv={}
        // 
        const getURLParameters = function(){
            if(window.location.search == ''){
                return {}
            }else{
                url = document.location.toString()
                // 正则：
                return url.match(/([^?=&]+)(=([^&]*))/g).reduce((a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a), {});
            }    
        };
        var app = new Vue({
            el: '#app',
            data: {
                msgs: [],
                search_game: ''
            },
            methods:{
                search : function() {
                    that = this;
                    limit = 10;
                    comment_url = '/search_comment_summary/' + limit + '/' + that.search_game;
                    axios.get(comment_url).then(
                        function(response){
                            if(response.data.length != 0){
                                that.msgs = response.data;
                            }

                        }
                    ).catch(function (error) {
                        console.log(error);
                    })
                },
                fill_comment: function(limit = 10, offset=0){
                    that=this;
                    comment_url = '/comment_summary/' + limit + '/' + offset;
                    axios.get(comment_url).then(
                        function(response){
                            if(response.data.length != 0){
                                that.msgs = response.data;
                                gv.limit = limit;
                                gv.offset = offset;
                                window.history.pushState('', '', '?limit=' + limit + '&offset=' + offset);
                            }

                        }
                    ).catch(function (error) {
                        console.log(error);
                    })
                },
                first_pages:function(){
                    this.fill_comment(gv.limit, 0);
                },
                last_pages: function(){
                    offset = gv.offset - gv.limit;
                    if (offset < 0) {
                        offset = 0;
                    }
                    this.fill_comment(gv.limit, offset);
                },
                next_pages: function(){
                    offset = gv.offset + gv.limit;
                    this.fill_comment(gv.limit, offset);
                }
            }
        });
        d=getURLParameters();
        if(d.limit){
            gv.limit = Number(d.limit);
        }else{
            gv.limit = 10;
        }
        if(d.offset){
            gv.offset = Number(d.offset);
        }else{
            gv.offset =  0;
        }
        app.fill_comment(gv.limit, gv.offset);
    </script>
</body>
</html>